<template>
    <div>
        <NavTop></NavTop>           
        <el-container>
            <el-aside width="50%"> <el-image style="width: 600px; height: 596px" :src="url" :zoom-rate="1.2" :max-scale="7"
                    :min-scale="0.2" :preview-src-list="srcList" :initial-index="4" fit="cover" /></el-aside>
            <el-main>
                <div class="container" style="font-size: 26px; ">
                    <!-- 第一行商品名称 -->
                    <div class="center">
                        <el-row>
                            <el-col :span="24" class="text-center">

                                <span>{{ data.name }}</span>
                            </el-col>
                        </el-row>
                        <!-- 第二行商品原价 -->
                        <el-row>
                            <el-col :span="12">
                                <span>商品价格</span>
                            </el-col>
                            <el-col :span="12">
                                <span>{{ data.price }}</span>
                            </el-col>
                        </el-row>
                        <!-- 第三行放置优惠价格 -->
                        <el-row>
                            <el-col :span="12">
                                <span>优惠价格</span>
                            </el-col>
                            <el-col :span="12">
                                <span>{{ data.onlineprice }}</span>
                            </el-col>
                        </el-row>
                        <!-- 第四行数量选择 -->
                        <el-row>
                            <el-col :span="24">
                                <span>数量</span> <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
                            </el-col>
                        </el-row>
                        <!-- 第五行两个按钮 -->
                        <el-row>
                            <el-col :span="12">
                                <el-button type="primary" @click="open">添加购物车</el-button>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="success" @click="purchase">点击购买</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import NavTop from '@/components/NavTop.vue';
import router from '@/router';
import axios from 'axios';
import { ref, } from 'vue'
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import {
    ArrowLeft,
    ArrowRight,
    Delete,
    Edit,
    Share,
} from '@element-plus/icons-vue'

//把store数据加载过来
import { useGoodsStore } from '../../stores/goods.js'
const store = useGoodsStore()
const purchase = () => {
  ElMessageBox.confirm("你是否确定购买这个商品", "提示", {
    confirmButtonText: "购买",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const time = new Date()
            //1.生成订单号
            const orderID = ref(time.getFullYear().toString() +
                time.getMonth().toString() +
                time.getDate().toString() +
                Math.random().toString().slice(2, 10))
            //后台打印验证订单号
            console.log(orderID.value);
            //生成总金额和总数量
            // let num = ref(0)//放总数量
            // let sum = ref(0)//放总金额
            // multipleSelection.value.map(v => {
            //     num.value += v.num
            //     sum.value += v.total
            // })
            //后台打印验证数据是否正确
            // console.log(num.value, sum.value);
            //把商品信息添加到订单数组中去
            store.orderAdd({
                orderID: orderID.value,
                num: num.value,
                sum: data.value.onlineprice * num.value,
                date: time,
                isOrder: false,
                // child: [...multipleSelection.value]//...展开运算符，把数组数据展开操作，相当于进行了循环
            })
            //在后台打印orderDate数据，查看是否添加完成
            console.log(store.orderData);
            //跳转到order界面
            router.push('/order')
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消购买",
      });
    });
};

const open = () => {
    ElMessageBox.alert('确认将物品加入购物车', '购物车', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK'
    })
    store.dataAdd({
        id: data.value.id,
        name: data.value.name,
        price: data.value.price,
        onlineprice: data.value.onlineprice,
        num: num.value,
        total: data.value.onlineprice * num.value
    })
    console.log(store.cartData);
}
const data = ref([])
const list = ref([])
const route = useRoute()
//从list数组中找到跳转时携带的参数相等的商品信息
//find函数可以把符合条件的数据返回给变量
//从session里获取商品数据,JSON.parse是把JSON数据转换成对象
list.value = JSON.parse(sessionStorage.getItem("goodslist"))
data.value = list.value.find((v) => v.id == route.params.id)
console.log(data.value);
const url = data.value.bigImg
const srcList = data.value.moreImg
const num = ref(1)
const handleChange = (value: number) => {
    console.log(value)
}


</script>
<style scoped>
.el-aside {
    background-color: rgb(255, 255, 255);
}

.el-main {
    background-image: url("../../../public/hq.jpg");
    background-size: cover;
}

.el-container {
    width: 1200px;
    height: 600px;
    margin: auto;
    margin-top: 2%;
}

.demo-image__error .image-slot {
    font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
    font-size: 30px;
}

.demo-image__error .el-image {
    width: 100%;
    height: 200px;
}

.container {
    width: 500px;
    height: 500px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
}

.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

::-webkit-scrollbar {
    width: 0 !important;
}

::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
}

span {
    color: aliceblue;
}</style>